<template>
  <div id="main">
    <!-- 会员 -->
    <p>会员管理，展示会员页面</p>
    <!-- 查询 -->
    <div id="query">
      <label for=""
        >会员手机 <input type="text" placeholder="请输入手机号" v-model="phone"
      /></label>
      <span
        ><el-button type="primary" size="mini" @click="query"
          >查询
        </el-button></span
      >
      <el-button type="primary" size="mini" @click="addform = true"
        >新增会员</el-button
      >
    </div>
    <!-- 渲染 -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="会员id" width="150">
        </el-table-column>
        <el-table-column prop="vip_name" label="会员姓名"> </el-table-column>
        <el-table-column prop="vip_discount" label="会员折扣">
        </el-table-column>
        <el-table-column prop="vip_total_consume" label="会员累计消费金额">
        </el-table-column>
        <el-table-column prop="vip_phone" label="会员电话"> </el-table-column>

        <el-table-column label="修改信息" width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="del(scope.row)"
              >删除会员</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //增加弹窗 -->
    <el-dialog title="添加会员" :visible.sync="addform">
      <el-form :model="form">
        <el-form-item label="会员姓名" :label-width="formLabelWidth">
          <el-input v-model="form.vip_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员电话 " :label-width="formLabelWidth">
          <el-input v-model="form.vip_phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员折扣" :label-width="formLabelWidth">
          <el-input v-model="form.vip_discoun" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员消费金额" :label-width="formLabelWidth">
          <el-input
            v-model="form.vip_total_consume"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addform = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- //修改信息 -->
    <el-dialog title="添加会员" :visible.sync="xiugai">
      <el-form :model="forms">
        <el-form-item label="会员id" :label-width="formLabelWidth">
          <el-input
            v-model="forms.id"
            autocomplete="off"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" :label-width="formLabelWidth">
          <el-input v-model="forms.vip_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员电话 " :label-width="formLabelWidth">
          <el-input v-model="forms.vip_phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员折扣" :label-width="formLabelWidth">
          <el-input v-model="forms.vip_discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员消费金额" :label-width="formLabelWidth">
          <el-input
            v-model="forms.vip_total_consume"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xiugai = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelWidth: "120px",
      // dialogFormVisible: false,
      addform: false,
      xiugai: false,
      phone: "",
      tableData: [
        // {
        //   id: "1",
        //   vip_name: "1",
        //   vip_discoun: "1",
        //   vip_total_consume: "1",
        //   vip_phone: "1",
        // },
      ],
      id: "",
      vip_name: "",
      vip_discoun: "",
      vip_total_consume: "",
      vip_phone: "",
      form: {
        id: "",
        vip_name: "",
        vip_discoun: "",
        vip_total_consume: "",
        vip_phone: "",
      },
      forms: {
        id: "",
        vip_name: "",
        vip_discount: "",
        vip_total_consume: "",
        vip_phone: "",
      },
    };
  },
  methods: {
    //删除

    del(row) {
      let id =row.id;
      console.log(row.id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$vip.delelt(id).then((data) => {
            // console.log(data);
            if (data.data.code) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.show();
            }
          });
        })
        .catch(() => {
          this.$essage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 增加
    add() {
      let data = {
        id: this.form.id,
        vip_name: this.form.vip_name,
        vip_discount: this.form.vip_discount,
        vip_total_consume: this.form.vip_total_consume,
        vip_phone: this.form.vip_phone,
      };
      // console.log(data);
      this.$vip.add(data).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.show();
          this.addform = false;
        }
      });
    },
    // 修改
    handleClick(row) {
      console.log(row);

      this.xiugai = true;
      this.forms = row;
    },
    queding() {
      let data = {
        id: this.forms.id,
        vip_name: this.forms.vip_name,
        vip_discount: this.forms.vip_discount,
        vip_total_consume: this.forms.vip_total_consume,
        vip_phone: this.forms.vip_phone,
      };
      console.log(data);
      this.$vip.handleClick(data).then((data) => {
        if (data.data.code == 200) {
          // alert("修改成功");
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.show();
          this.xiugai = false;
        }
      });
    },

    show() {
      this.$vip.show().then((data) => {
        // console.log(data);
        this.tableData = data.data.data;
      });
    },
    query() {
      let phone = Number(this.phone);
      console.log(typeof phone);
      this.$vip.query(phone).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.show();
        }
      });
    },
  },
  created() {},
  mounted() {
    this.show();
  },
  computed: {},
};
</script>

<style scoped lang="less">
#main {
  text-align: left;
}
p {
  font-weight: bold;
}
input {
  height: 25px;
}
#query {
  margin: 10px 0;
}
span {
  margin: 0 10px;
}
</style>
